<template lang="pug">
    skin(@up="up",@down="down",@yes="yes",@back="back",@duringUp="up",@duringDown="down")
        div(class="flex-column")
            div(class="flex-column-item flex-row under-line")
                div(class="flex-row-item flex-center-center") ----警示设置----
                div(class="flex-row-item", style="flex:0") {{activeId+1}}/6
            div(class="flex-column-item flex-row",
            v-for="menu in getMenus()",
            :class="{'selected-text': menu.id == activeId ? true: false}")
                div(class="flex-row-item left") {{menu.name}}
                div(class="flex-row-item right") {{menu.value.name}}
        //- select-control(:title="active.name",:options="active.options",:visible="visible",v-if="!active.isAmountControl")    
        control-select(v-model="active",:visible="visible",v-if="!active.isAmountControl", ref="controlSelect")
        control-amount(v-model="active",:visible="visible",v-else,ref="controlAmount")
</template>

<script>
    export default {
        data() {
            return {
                activeId: 0,
                page: {maxResultCount: 3, skipCount: 0},
                visible: false,
                active: null,
                isAmountControl: false
            };
        },
        computed: {
            menus() {
                var menus = [
                    {
                        name: "1.警示声音",
                        id: 0,
                        showModal: true,
                        value: window.machine.warning.voice,
                        options: [{name: "开", value: true}, {name: "关", value: false}],
                        onChange(model) {
                            window.machine.warning.voice = model.value;
                        }
                    },
                    {
                        name: "2.按键声音",
                        id: 1,
                        showModal: true,
                        value: window.machine.warning.buttonVoice,
                        options: [{name: "开", value: true}, {name: "关", value: false}],
                        onChange(model) {
                            window.machine.warning.buttonVoice = model.value;
                        }
                    },
                    {
                        name: "3.用餐提醒",
                        id: 2,
                        showModal: true,
                        value: window.machine.warning.foodWarning,
                        options: [{name: "开", value: true}, {name: "关", value: false}],
                        onChange(model) {
                            window.machine.warning.foodWarning = model.value;
                        }
                    },
                    {
                        name: "4.测糖提醒",
                        id: 3,
                        showModal: true,
                        value: window.machine.warning.blood,
                        options: [{name: "开", value: true}, {name: "关", value: false}],
                        onChange(model) {
                            window.machine.warning.blood = model.value;
                        }
                    },
                    {
                        name: "5.低药提醒",
                        id: 4,
                        showModal: true,
                        value: window.machine.warning.medicalLow,
                        unit: "U",
                        max: 100,
                        min: 0,
                        title: '低药提醒',
                        increment: 1,
                        isAmountControl: true,
                        options: [{name: "开", value: true}, {name: "关", value: false}],
                        onChange(model) {
                            window.machine.warning.medicalLow = model.value;
                        }
                    },
                    {
                        name: "6.闹铃提醒",
                        id: 5,
                        showModal: true,
                        value: window.machine.warning.clock,
                        options: [{name: "开", value: true}, {name: "关", value: false}],
                        onChange(model) {
                            window.machine.warning.clock = model.value;
                        }
                    }
                ];
                return menus;
            },
            currentPageMenus() {
                var start = this.page.skipCount;
                var end = this.page.skipCount + this.page.maxResultCount;
                return this.getMenus().slice(start, end);
            }
        },
        methods: {
            getMenus() {
                var menus = this.menus;
                var start = this.page.skipCount;
                var end = this.page.skipCount + this.page.maxResultCount;
                return menus.slice(start, end);
            },
            up() {
                if (this.visible) {
                    if (this.active.isAmountControl) this.$refs.controlAmount.up();
                    else this.$refs.controlSelect.up();
                    return;
                }
                if (this.activeId == 0) {
                    this.page.skipCount = 3;
                } else if (this.activeId == 3) {
                    this.page.skipCount = 0;
                }

                if (this.activeId == 0) {
                    this.activeId = this.menus[this.menus.length - 1].id;
                } else {
                    this.activeId = this.activeId - 1;
                }
                this.active = this.menus[this.activeId];
            },
            down() {
                if (this.visible) {
                    if (this.active.isAmountControl) this.$refs.controlAmount.down();
                    else this.$refs.controlSelect.down();
                    return;
                }
                if (this.activeId == 2) {
                    this.page.skipCount = 3;
                } else if (this.activeId == 5) {
                    this.page.skipCount = 0;
                }

                if (this.activeId == this.menus[this.menus.length - 1].id) {
                    this.activeId = 0;
                } else {
                    this.activeId = this.activeId + 1;
                }

                this.active = this.menus[this.activeId];
            },

            back() {
                if (this.visible) {
                    this.visible = !this.visible;
                } else {
                    this.$router.push("/machine-setting?index=1");
                }
            },
            yes() {
                if (this.visible) {
                    this.visible = !this.visible;
                    return;
                }

                var active = this.menus.find(menu => {
                    return menu.id == this.activeId;
                });
                if (active.showModal) {
                    this.visible = true;
                } else {
                    this.$router.push(active.to);
                }
            }
        },
        created() {
            this.active = this.menus[0];
        }
    };
</script>

<style lang="less">
</style>
